<template>
    <div >
        <el-image  v-if="imageSrc!=null && imageSrc!='' "
            :style="{ width: imageWidth+'px' , height: imageHeight+'px' }"
            :src="imageSrc" 
            :preview-src-list="[imageSrc]">
        </el-image>

        <el-image  v-else
            :style="{ width: imageWidth+'px' , height: imageHeight+'px' }"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fxsj%2F1r%2Ff6%2F2x.jpg%21%2Ffw%2F700%2Fwatermark%2Furl%2FL3hzai93YXRlcl9kZXRhaWwyLnBuZw%2Falign%2Fsoutheast&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666315528&t=7e8ba5084b7519dce45bc5196bb692d0" 
            :preview-src-list="[imageSrc]">
        </el-image>

        <!-- <viewer :images="[{url:''+( imageSrc )+'',title:''}]">
            <img   :src="imageSrc" :width="imageWidth"  :height="imageHeight" class="img" /> 
        </viewer> -->

        <!-- <img   :src="imageSrc" :width="imageWidth"  :height="imageHeight" class="img"  @click="showImg"/> 
        <el-dialog :visible.sync="dialogVisible" top="5vh" append-to-body>
            <div style="text-align:center;display:flex" >
                <img style="width:100%" :src="dialogImageUrl" alt="">
            </div>
        </el-dialog> -->

    </div>
</template>

<script>
export default {
    props: {

        width:{
            type:Number ,
            defalut:'60'
        },

        height:{
            type:Number ,
            defalut:'60'
        },
        src: {
            type: String
        },
        
    },
    watch: {
         
    },
    data() {
        return {
            imageSrc:'',

            imageWidth: 60,
            imageHeight: 60,

            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    mounted(){
        if( this.src ){
              if( this.src.indexOf('https://') >-1 || this.src.indexOf('http') >-1 ){
                this.imageSrc = this.src;
              }else{
                 this.imageSrc=  this.CMBASE.baseFileContext +  this.src;
              }
        }else{
            this.imageSrc = 'https://zyfmoss.oss-cn-beijing.aliyuncs.com/2023-01-29/030b286da24844518d1f3af47db521d7.png';
        }
        this.imageWidth =  this.width || 60;
        this.imageHeight =  this.height || 60;
        

    },
        
    methods: {

        showImg(){
            this.dialogImageUrl =    this.imageSrc;
            this.dialogVisible = true;
        },
         
    }
}
</script>
<style lang="scss" scope >


    .divImg{
        
        height: 100px;
        display: flex;
        align-items: center;

        .delete-img {
            display: none;
        }


        &:hover{
            .delete-img {
                display: flex;
                position: absolute;
                width: 100px;
                text-align:center;
                justify-content: center;
                align-items: center;
                left: 0px;
                bottom: 0px;
                background: #606266;
                z-index: 999;
                cursor: pointer;
                border-radius: 0px 0px  5px  5px;
                i {
                    margin: 5px  auto;
                    display: block;
                    font-size: 14px;
                    color: white;
                }
            }
        }

    }


    .single-upload{
        .el-upload-list{
            img{
                object-fit: contain;
            }
        }
        .el-upload--picture-card{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            /* img{
                width: 120px;
                height: 120px;
                object-fit: contain;
            } */
        }
    }


    // 上传图片框样式
    .el-upload--picture-card{
        border: 1px dashed #13C3C7;
    }
    .el-upload--picture-card:hover {
        border-color: #13C3C7;
        color: #13C3C7;
    }
    .el-upload--picture-card{
        width: 100px;
        height: 100px;
        font-size: 16px !important;
    }
    .el-upload{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }

    .el-upload-list--picture-card .el-upload-list__item-actions:hover {
        opacity: 1;
        font-size: 16px;
    }

    .el-upload-list--picture-card .el-upload-list__item-thumbnail{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }
    


</style>
